<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>梦幻消消乐</title>
    <script src="tailwind-core.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
    <!-- 游戏容器 -->
    <div class="game-container max-w-4xl w-full mx-auto bg-white rounded-2xl p-6 md:p-8 shadow-lg relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute -right-10 -top-10 w-40 h-40 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="absolute -left-16 -bottom-16 w-48 h-48 bg-secondary/10 rounded-full blur-3xl"></div>
        
        <!-- 游戏标题 -->
        <div class="game-header text-center mb-4 relative z-10">
            <h1 class="game-title font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary mb-2">梦幻消消乐</h1>
            <p class="text-gray-600 text-lg">匹配三个或更多相同的元素来得分！</p>
        </div>
        
        <!-- 游戏信息栏 -->
        <div class="game-stats relative z-10">
            <div class="stat-card">
                <div class="text-primary text-2xl"><i class="fa fa-clock-o"></i></div>
                <div>
                    <div class="text-xs text-gray-500">时间</div>
                    <div class="stat-value font-bold" id="timer">60</div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="text-secondary text-2xl"><i class="fa fa-star"></i></div>
                <div>
                    <div class="text-xs text-gray-500">分数</div>
                    <div class="stat-value font-bold" id="score">0</div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="text-accent text-2xl"><i class="fa fa-trophy"></i></div>
                <div>
                    <div class="text-xs text-gray-500">目标</div>
                    <div class="stat-value font-bold" id="target">1000</div>
                </div>
            </div>
            
            <div class="stat-card">
                <button id="restartBtn" class="bg-primary hover:bg-primary/90 text-white px-3 py-1 rounded-lg transition-all duration-300 flex items-center justify-center gap-1 w-full">
                    <i class="fa fa-refresh"></i>
                    <span>重玩</span>
                </button>
            </div>
        </div>
        
        <!-- 游戏棋盘 -->
        <div class="game-board-wrapper relative z-10">
            <div id="gameBoard" class="grid grid-cols-6 gap-2 md:gap-3 bg-board/50 p-3 md:p-4 rounded-xl aspect-square mx-auto">
                <!-- 游戏方块将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <!-- 游戏提示 -->
        <div class="game-footer text-center mt-4 text-gray-600 text-sm md:text-base game-instructions">
            <p>点击并交换相邻的方块，匹配三个或更多相同的元素</p>
        </div>
        
        <!-- 游戏结束弹窗 -->
        <div id="gameOverModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all">
                <div class="text-center">
                    <div id="gameOverTitle" class="text-2xl font-bold mb-2 text-primary">游戏结束</div>
                    <p class="text-gray-600 mb-4">你的得分是：<span id="finalScore" class="font-bold text-secondary">0</span></p>
                    
                    <div id="successMessage" class="hidden mb-4">
                        <div class="text-green-500 font-bold mb-2"><i class="fa fa-check-circle"></i> 恭喜你完成了目标！</div>
                        <div class="bg-green-50 p-3 rounded-lg">
                            <p class="text-green-700">再接再厉，挑战更高分数！</p>
                        </div>
                    </div>
                    
                    <div id="failMessage" class="hidden mb-4">
                        <div class="text-red-500 font-bold mb-2"><i class="fa fa-times-circle"></i> 很遗憾，未能完成目标</div>
                        <div class="bg-red-50 p-3 rounded-lg">
                            <p class="text-red-700">继续努力，你一定可以的！</p>
                        </div>
                    </div>
                    
                    <button id="playAgainBtn" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg transition-all duration-300 w-full mt-4">
                        再玩一次
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="mt-2 text-center text-gray-500 text-xs">
        <p>© 2025 梦幻消消乐 | 设计与开发</p>
    </footer>

    <script src="game-logic.js"></script>
</body>
</html>
    